require(['./config'], () => {
    require(['template','header','footer'], (template) => {
        class Index {
            constructor () {
                this.renderBanner()
                this.rendNavicat()
                this.rendCenter()
                this.bannerBtn() 
            }
            renderBanner() {
                $.get('/libs/json/homeBanner.json', resp => {
                    const html = template('homeBannertemplate', {
                        homeBannerul: resp
                    })
                    $('#homeBanner-ul').html(html)
                    this.bannerMove()
                })
            }
            rendNavicat () {
                $.get('/libs/json/homeNavicat.json',resp => {
                    const html = template('shopinmaftion' , {
                        shopnav: resp
                    })
                    $('#shop-nav').html(html)
                })
            }
            rendCenter () {
                $.get('/libs/json/homeCenter.json',resp => {
                    const html = template('centtemplate' ,{
                        maincentshop: resp
                    })
                    $("#main-cent-shop").html(html)
                })
                
            }
            bannerMove () {
                const bannermo = $('#homeBanner-ul')
                let index = 1
                const firstDom = bannermo.children().first().clone()
                const lastDom = bannermo.children().last().clone()
                bannermo.prepend(lastDom)
                bannermo.append(firstDom)
                bannermo.hover(() => {
                    clearInterval(bannermo.timer)
                }, (function auto () {
                    bannermo.timer = setInterval(() => {
                        var left = index * $(window).width()
                        bannermo.animate( {left : -left + 'px'})
                        index++
                        if( index > 2) {
                            index = 1
                            setTimeout(() => {
                                bannermo.css('left', '0px')
                            }, 1000)
                        }
                        return index 
                    }, 3000)
                    return auto
                })())
            }
            bannerBtn () {
                const bannermo = $('#homeBanner-ul')
                    const bannerli = $('.homeBanner-li')
                    const btns = $('.span-btn-banner')
                    btns.on('click', function () {
                        $(this).addClass('btn-color').siblings().removeClass('btn-color')
                        const id = Number($(this).attr('data-id')) 
                        console.log(id)
                        if(id === 11 ) {
                            bannermo.css('left','0%')
                        }
                        if(id ===12 ) {
                            bannermo.css('left','-100%') 
                        }
                    })
            }
        }
        new Index()
    })
})
